<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的奖品</title>
	<link rel="stylesheet" href="__PUBLIC__/Product/css/lib/dropload.css">
    <script src="__PUBLIC__/Product/js/lib/flexible.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }
        /* 外圈盒子 */
        .prizelist_box{
            width: 10.0rem;
            position: relative;
        }
        body{
            background-color: #f4f4f4;
        }
        /* 头部 */
        .prizelist_header{
            width: 100%;
            height: 1rem;
            background: linear-gradient(to right, #6951bc, #a163e0);
            position: relative;
            margin-bottom: 0.013333rem;
        }
        .prizelist_header img{
            width: 0.226667rem;
            height: 0.453333rem;
            position: absolute;
            bottom: 0.26rem;
            left: 0.266667rem;
        }
        .prizelist_header p{
            font-size: 0.48rem;
            line-height: 1rem;
            text-align: center;
            color: white;
        }
        .prizelist_content{
            width: 100%;
        }
        .prizelist_content .list_box{
            width: 100%;
        }
        .prizelist_content .list_box .list_item{
            width: 9.466667rem;
            padding: 0 .266667rem;
            height: 2.16rem;
            /* margin-bottom: .013333rem; */
            border-bottom: .013333rem solid #f4f4f4;
            background-color: white;
            display: flex;
        }
        .list_box .list_item .list_lt{
            width: 1.653333rem;
            padding-top: .253333rem;
        }
        .list_box .list_item .list_lt .img_box{
            width: 1.626667rem;
            height: 1.626667rem;
            font-size: 0.3466667rem;
            text-align: center;
        }
        .list_box .list_item .list_con{
            width: 6rem;
            padding-top: .253333rem; 
        }
        .list_box .list_item .list_con .title{
            font-size: .346667rem;
            padding-left: .346667rem;
        }
        .list_box .list_item .list_con .common{
            font-size: 0.32rem;
            color: #898989;
            padding-left: .346667rem;
        }
        .list_box .list_item .list_con .get_time{
            margin-top: .466667rem;
        }
        .list_box .list_item .list_rt{
            width: 1.786667rem;
            height: 100%;
            position: relative;
        }
        .list_box .list_item .list_rt .state{
        	width: 100%;
        	padding-top: 0.26666666rem;
        	font-size: 0.34666666rem;
        	text-align: center;
        	color: #8e6cd1;
        }
        .list_box .list_item .list_rt .search_wuliu{
            width: 1.786667rem;
            height: .64rem;
            border: .013333rem solid #8e6cd1;
            color: #8e6cd1;
            text-align: center;
            line-height: .64rem;
            border-radius: .08rem;
            font-size: .32rem;
            margin-top: .466667rem;
        }
        .list_box .list_item .list_rt img{
            width: .16rem;
            height: .266667rem;
            position: absolute;
            top: .933333rem;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="prizelist_box">
        <!-- 头部 -->
        <div class="prizelist_header">
            <img src="__PUBLIC__/Product/img/fanhui.png" alt="返回">
            <p>我的奖品</p>
        </div>
        <!-- 内容 -->
        <div class="prizelist_content">
            <div class="list_box">
                <div class="list">
                	<!--<div class="list_item">
	                    <div class="list_lt">
	                        <div class="img_box">
	                            <img src="" alt="">
	                        </div>
	                    </div>
	                    <div class="list_con">
	                        <p class="title">iphone8 256G</p>
	                        <p class="common get_time">中奖时间：<span>2017.10.10 22:10:10</span></p>
	                        <p class="common receive_time">领奖时间：<span>2017.10.10 22:10:10</span></p>
	                    </div>
	                    <div class="list_rt">
	                    	<p class="state">未兑换</p>
	                        <img src="__PUBLIC__/Product/img/right_gou.png" alt="">
	                        <div class="search_wuliu">查看物流</div>
	                    </div>
	                </div>
	                <div class="list_item">
	                    <div class="list_lt">
	                        <div class="img_box">
	                            <img src="" alt="">
	                        </div>
	                    </div>
	                    <div class="list_con">
	                        <p class="title">iphone8 256G</p>
	                        <p class="common get_time">中奖时间：<span>2017.10.10 22:10:10</span></p>
	                        <p class="common receive_time">领奖时间：<span>2017.10.10 22:10:10</span></p>
	                    </div>
	                    <div class="list_rt">
	                    	<p class="state">未兑换</p>
	                        <img src="__PUBLIC__/Product/img/right_gou.png" alt="">
	                        <div class="search_wuliu">查看物流</div>
	                    </div>
	                </div>
	                <div class="list_item">
	            		<input type="hidden" value="" />
	                    <div class="list_lt">
	                        <div class="img_box">
	                            <img src="" alt="">
	                        </div>
	                    </div>
	                    <div class="list_con">
	                        <p class="title">iphone8 256G</p>
	                        <p class="common get_time">中奖时间：<span>2017.10.10 22:10:10</span></p>
	                        <p class="common receive_time">领奖时间：<span>2017.10.10 22:10:10</span></p>
	                    </div>
	                    <div class="list_rt">
	                    	<p class="state">未兑换</p>
	                        <img src="__PUBLIC__/Product/img/right_gou.png" alt="">
	                        <div class="search_wuliu">查看物流</div>
	                    </div>
	                </div>-->
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="__PUBLIC__/Product/js/lib/jquery3.2.1.js"></script>
<script src="__PUBLIC__/Product/js/lib/dropload.js"></script>
<script>
    $(function(){
        $('.prizelist_header img').bind('click',function(){
            window.location.href = document.referrer;	//返回上一页并刷新
        });
        var flag1 = true;
        function Flag1(a){
	        return flag1 = a;
	    }
        dropload();
	    function dropload() {
	        var page = 0; //页码数
	        // dropload函数接口设置
	        $('.list_box').dropload({
	            scrollArea: window,
	            // 上拉加载更多
	            domDown: {
	                domClass: 'dropload-down',
	                // 滑动到底部显示内容
	                domRefresh: '<div class="dropload-refresh">上拉加载更多</div>',
	                // 内容加载过程中显示内容
	                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
	                // 没有更多内容显示提示
	                domNoData: '<div class="dropload-noData">我也是有深度的...</div>'
	            },
	            // 上拉加载更多 回调函数
	            loadDownFn: function(me) {
	                page++; // 每次请求，页码加1
	                if(flag1){
	                    $.ajax({
	                        type: 'get',
	                        url: 'http://a.91jfk.com/Product/Prize/prize_list?p=' + page,
	                        dataType: 'json',
	                        success: function(res) {
	                            console.log(res);
	                            // data = JSON.parse(res);
	                            if (res.nowpage < res.totalpage) {
	                                Flag1(true);
	                                if (res.code == '1') {
	                                	var data = res.msg;
	                                    if (data.length > 0) {
											for (var i = 0;i < data.length;i++) {
												create_item(data[i].draw_state,data[i].id,data[i].pid,data[i].time,data[i].receive_time,data[i].state);
											}
	                                        if(data.length < 10){
	                                            // 显示无数据
	                                            me.noData();
	                                            // 重置
	                                            setTimeout(function() {
	                                                me.resetload();
	                                            }, 1500);
	                                        }
	                                    }
	                                }
	                            }else{
	                                Flag1(false);
	                                if (res.code == '1') {
	                                    var data = res.msg;
	                                    if (data.length > 0) {
											for (var i = 0;i < data.length;i++) {
												create_item(data[i].draw_state,data[i].id,data[i].pid,data[i].time,data[i].receive_time,data[i].state);
											}
	                                        if(data.length < 10){
	                                            // 显示无数据
	                                            me.noData();
	                                            // 重置
	                                            setTimeout(function() {
	                                                me.resetload();
	                                            }, 1500);
	                                        }
	                                    }
	                                }
	                                setTimeout(function() {
	                                	me.noData();
	                                	me.lock();
                                        me.resetload();
                                    }, 1500);
	                            }
	                            // 重置
	                            setTimeout(function() {
	                                me.resetload();
	                            }, 1500);
	                        },
	                        // 加载出错
	                        error: function(err) {
	                            console.log('Ajax error!');
	                            // 即使加载出错，也得重置
	                            setTimeout(function() {
	                                me.resetload();
	                            }, 1500);
	                        }
	                    });
	                }
	            }
	        });
	    }
        $('.list').off('click', '.list_item').on('click', '.list_item',function(){
        	var value1 = $(this).find('.input1').val();		// 状态
        	var value2 = $(this).find('.input2').val();		// 商品id
        	var name = $(this).find('.title').text();
        	if (value1 == '1' || name.substr(-3) == '集分币') {
        		console.log(value1,value2,name.substr(-3));
        	} else if (value1 == '2'){
        		window.location.href = 'prize_detail.html?id=' + value2;
        	}
        });
        $('.list').off('click', '.search_wuliu').on('click', '.search_wuliu',function(){
        	var id = $(this).parents('.list_item').find('.input2').val();
        	localStorage.setItem('luck_id',id);
        	window.location.href = 'adress_list.html?id=' + id;
        });
        function create_item(value1,value2,name,luck_time,receive_time,state){
        	var item_box = $('.list');
        	switch(state){
        		case '1':
        			var item = $('<div class="list_item"><input type="hidden" class="input1" value="' + value1 + '" /><input type="hidden" class="input2" value="' + value2 + '" /><div class="list_lt"><div class="img_box">奖品名称</div></div><div class="list_con"><p class="title">' + name + '</p><p class="common get_time">中奖时间:<span>' + luck_time + '</span></p><p class="common receive_time">领奖时间:<span>' + receive_time + '</span></p></div><div class="list_rt"><p class="state">已兑换</p></div></div>');
        			break;
        		case '2':
        			var item = $('<div class="list_item"><input type="hidden" class="input1" value="' + value1 + '" /><input type="hidden" class="input2" value="' + value2 + '" /><div class="list_lt"><div class="img_box">奖品名称</div></div><div class="list_con"><p class="title">' + name + '</p><p class="common get_time">中奖时间:<span>' + luck_time + '</span></p></div><div class="list_rt"><p class="state">未兑换</p><div class="search_wuliu">领取</div></div></div>');
        			break;
        		case '3':
        			var item = $('<div class="list_item"><input type="hidden" class="input1" value="' + value1 + '" /><input type="hidden" class="input2" value="' + value2 + '" /><div class="list_lt"><div class="img_box">奖品名称</div></div><div class="list_con"><p class="title">' + name + '</p><p class="common get_time">中奖时间:<span>' + luck_time + '</span></p></div><div class="list_rt"><p class="state">过期未兑换</p></div></div>');
        			break;
        		default:
        			break;
        	}
        	item_box.append(item); 
        }
    });
</script>